<template>
	<view>
		
		<view class="bg">
			<view class="top">
				<textScroll></textScroll>
				<!-- <uni-notice-bar background-color='#19AA8B' color='white' scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> -->
			</view>
			<view class="card-list" >
				<view class="card-item">
					<view class="title">
						找什么
					</view>
					<view class="content">
						<button class="bt" v-for="item in serList">{{item}}</button>
					</view>
			
				</view>
			</view>
			
			<view class="card-list" >
				<view class="card-item">
					<view class="title">
						做什么（可选择）
					</view>
					<view class="content">
						<button class="bt" v-for="item in doList">{{item}}</button>
					</view>
			
				</view>
			</view>
			
			
			<view class="card-list" >
				<view class="card-item">
					<view class="title">
						用多久
					</view>
					<view class="content2">
						<view class="line-til">
							陪护时长
						</view>
						<view class="btList">
							<button class="bt" v-for="item in timeList">{{item}}</button>
						</view>
	
						<view class="line-item">
							<view class="line-til">
								陪护时段
							</view>
							<view class="line-text">
								24小时
							</view>
						</view>
						<view class="line-item">
							<view class="line-til">
								服务开始日期
							</view>
							<view class="line-text">
								请选择>
							</view>
						</view>
						<view class="line-item">
							<view class="line-til">
								陪护天数
							</view>
							<view class="line-text">
								请输入 天
							</view>
						</view>
						
					</view>
			
				</view>
			</view>
			
			<view class="card-list" >
				<view class="card-item">
					<view class="title">
						有什么要求
					</view>
					<view class="content3">
						<view class="line-til">
							陪护人员性别
						</view>
						<view class="btList">
							<button class="bt" v-for="item in sexList">{{item}}</button>
						</view>
					</view>
			
				</view>
			</view>
			
			<view class="card-list" >
				<view class="card-item">
					<view class="title">
						做什么（可选择）
					</view>
					<view class="content">
						<button class="bt" v-for="item in serList">{{item}}</button>
					</view>
			
				</view>
			</view>
			
			
			<view class="card-list" >
				<view class="card-item">
					<view class="title">
						被护理人的情况是
					</view>
					<view class="content2">
						<view class="line-item">
							<view class="line-til">
								年龄
							</view>
							<view class="line-text">
								请输入 岁
							</view>
						</view>
						<view class="line-til">
							自理情况
						</view>
						<view class="btList">
							<button class="bt" v-for="item in selfCareList">{{item}}</button>
						</view>
				
						<view class="line-item">
							<view class="line-til">
								所在区域
							</view>
							<view class="line-text">
								请选择>
							</view>
						</view>
						<view class="line-item">
							<view class="line-til">
								疾病/手术
							</view>
							<view class="line-text">
								选填>
							</view>
						</view>
						<view class="line-item">
							<view class="line-til">
								特殊要求
							</view>
							<view class="line-text">
								选填>
							</view>
						</view>
						
					</view>
			
				</view>
			</view>
		
		</view>
		<Bottom></Bottom>
	</view>
</template>

<script>
	import Bottom from './components/bottom/bottom.vue'
	import textScroll from './components/textScroll/textScroll.vue'
	export default {
		components: {
			Bottom,
			textScroll
		},
		data() {
			return {
				serList:['居家护工','居家护工','居家护工','居家护工','居家护工'],
				selfCareList:['自理','半自理','不能自理'],
				sexList:['男','女','不限'],
				timeList:['全天','自定义'],
				doList:['照顾病人','照顾老人','做饭','家务']
			}
		}
		
	}
	
</script>

<style lang="scss" scoped> 

.bg{
	width: 100%;
	height: 100%;
	background-color: #F5F7FA;
	margin-bottom:240rpx ;
	.top{
		height: 100rpx;
		background-color: #19AA8B;
		// margin:20rpx 40rpx;		
	}
	.card-list{
		// width: 100%;
		height: 100%;
		background-color: white;
		border-radius: 40rpx;
		margin:20rpx;
		.card-item{
			margin-bottom:20rpx;
			.title{
				padding:20rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 4rpx solid #F5F7FA;
			}
			.content{
				width: 100%;
				padding:20rpx;
				// margin: 20rpx 0;
				display: flex;
				// flex-direction: column;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				justify-content: flex-start;
				.btList{
					display: flex;
				}
				// padding:20rpx;
				.bt{
					flex: 1;
					height: 40px;
					margin: 0 5px 5px 0;
					// background-color: #999;
					width: calc((100% - 22px) / 4);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
					min-width: calc((100% - 22px) / 4);// 加入min-width、max-width后每个child的宽度就生效了
					max-width: calc((100% - 22px) / 4);
				
					background-color: rgba(69,193,167,0.3);
					font-size: 26rpx;
					// font-size: 30rpx;
				}
			}
			.content2{
				width: 100%;
				padding:20rpx;
				margin: 20rpx 0;
				.btList{
					display: flex;
				}
				.bt{
					height: 40px;
					margin: 0 5px 5px 0;
					width: 47%;
					background-color: rgba(69,193,167,0.3);
					font-size: 26rpx;
					// font-size: 30rpx;
				}
				.line-til{
					padding-bottom:20rpx;
				}
				
				.line-item{
					display:flex;
					position: relative;
					padding: 10rpx;
					.line-til{
						
					}
					.line-text{
						position: absolute;
						right: 30rpx;
					}
						
						
					
				}
			}
			.content3{
				width: 100%;
				padding:20rpx;
				// margin: 20rpx 0;
				.btList{
					display: flex;
				}
				.line-til{
					padding-bottom:20rpx;
				}
				// padding:20rpx;
				.bt{
					flex: 1;
					height: 40px;
					margin: 0 5px 5px 0;
					// background-color: #999;
					width: calc((100% - 22px) / 4);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
					min-width: calc((100% - 22px) / 4);// 加入min-width、max-width后每个child的宽度就生效了
					max-width: calc((100% - 22px) / 4);
				
					background-color: rgba(69,193,167,0.3);
					font-size: 26rpx;
					// font-size: 30rpx;
				}
			}
		}
	}
}
</style>